<template>
  <div class="itemType">
    <van-popup
      get-container="body"
      @click-overlay="clickOverlay"
      v-model="myShow"
      duration="0.2"
      round
      position="bottom"
      :style="{ height: '300px', backgroundColor: '#f2f2f2' }"
    >
      <div class="popSlot">
        <van-cell
          title="Item Type"
          :icon="btn_close_normal"
          @click="clickOverlay"
        />

        <van-button
          v-if="load"
          size="mini"
          class="loading"
          loading
          type="info"
          loading-text="加载中..."
        />

        <!-- <van-tree-select
          height="200px"
          v-if="!load"
          :items="items"
          :active-id.sync="activeIds"
          :main-active-index.sync="activeIndex"
          @click-nav="getDay"
          @click-item="getTime"
        />-->
        <div class="weight">
          <van-field
            v-if="!load"
            v-model="weight"
            type="tel"
            required
            label="Weight"
            placeholder="please enter the weight"
          />
        </div>
        <div class="weightItemType">
          <van-cell
            title="Item type"
            v-if="!load"
          >
            <!-- 使用 label 插槽来自定义下方 内容 -->
            <template #label>
              <van-row>
                <van-col
                  span
                  v-for="(item, index) in item"
                  :key="index"
                  @click="switchItem(item)"
                >
                  <van-button
                    :class="{ a: item.num % 2 }"
                    size="small"
                    plain
                    hairline
                    type="primary"
                  >
                    {{
                    item.name
                    }}
                  </van-button>
                  <!-- {{item.id}} -->
                </van-col>
              </van-row>
            </template>
          </van-cell>
        </div>
      </div>
      <div
        v-if="!load"
        class="timeSure"
      >
        <van-button
          @click="confirm"
          type="primary"
          size="large"
        >confirm</van-button>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  name: 'itemTypePop',
  props: {
    show: {
      // 通过props传递给子组件的show，不能在子组件内部修改props中的show值。
      type: Boolean,
      default: false
    }
  },
  watch: {
    show: {
      handler(newValue, oldValue) {
        // console.log(newValue)
        if (newValue) {
          this.myShow = true
          setTimeout(() => {
            this.load = false
          }, 3000)
        } else {
          this.myShow = false
          setTimeout(() => {
            this.load = true
          }, 1000)
        }
      },
      deep: true
    }
  },
  mounted() {},
  methods: {
    clickOverlay() {
      //   this.show = false
      //   https://blog.csdn.net/github_35549695/article/details/82770044
      //this.show = false;  //这行去掉 不能直接改变props中参数的值
      this.$emit('closePop')
    },

    confirm() {
      this.$store.dispatch('setWeight', this.weight)
      console.log('vuex', this.$store.state.app)
      let idArr = []
      // console.log(this.item)
      let list = this.item.filter(item => {
        return item.num % 2
      })
      list.forEach(item => {
        idArr.push(item.id)
      })
      this.selectedId = list.length == 0 ? '' : list[0].id
      this.$emit('getItemType', this.weight, this.selectedId)
      // console.log('list', list)
      // console.log('idArr', idArr)
    },
    switchItem(item) {
      // console.log(item)

      this.item.forEach(items => {
        items.num = 2
      })

      let id = item.id
      item.num += 1
    },
    getItemData(data) {
      // console.log(typeof data)
      let result = JSON.parse(data)
      // console.log(result)
      let newArr = []

      for (let i = 0; i < result.length; i++) {
        let item = {}
        item.name = result[i].valueEn
        item.id =  result[i].id
        item.num = 0
        newArr.push(item)
      }

      this.item = newArr
    }
  },
  data() {
    return {
      load: true,
      myShow: false,
      btn_close_normal: require('../../assets/image/btn_close_normal.png'),
      weight: '',
      item: [
        // {
        //   name: 'file1',
        //   id: '1',
        //   num: 0
        // },
        // {
        //   name: 'file2',
        //   id: '2',
        //   num: 0
        // },
        // {
        //   name: 'file3',
        //   id: '3',
        //   num: 0
        // },
        // {
        //   name: 'file4',
        //   id: '4',
        //   num: 0
        // },
        // {
        //   name: 'file5',
        //   id: '5',
        //   num: 0
        // },
        // {
        //   name: 'file6',
        //   id: '6',
        //   num: 0
        // }
      ],
      selectedId: ''
    }
  }
}
</script>
<style lang="scss" scoped>
.popSlot {
  width: 100%;
  .van-cell {
    border-bottom: 1px solid #eeeeee;
    position: relative;
    /deep/ i {
      position: absolute;
      right: 14px;
    }
    /deep/ .van-cell__title {
      span {
        font-weight: 700;
      }
    }
  }
  .weight {
    .van-cell {
      flex-direction: column;

      /deep/ .van-cell__title span::after {
        margin-left: 2px;
        position: absolute;

        color: #ee0a24;
        font-size: 0.37333rem;
        content: '*';
      }
      /deep/ .van-cell__title span::before {
        margin-left: 2px;
        position: absolute;
        // text-align: right;
        margin-left: 60px;
        color: #cccccc;
        font-size: 0.37333rem;
        content: '(kg)';
      }
    }
    /deep/ .van-cell--required::before {
      content: '';
    }
  }
  .weightItemType {
    .van-button {
      margin-bottom: 5px;
      //   width: 32rem;
      //   height: 32px;
      margin-right: 14px;
      color: #cccccc;
      border-color: #cccccc;
    }
    .a {
      background-color: $main-color;
      color: #ffffff;
      border-color: $main-color;
    }
  }

  /deep/ .van-cell::after {
    border-bottom: none;
  }
  /deep/ .loading {
    background-color: $main-color;
    position: absolute;
    bottom: 130px;
    left: 50%;
    transform: translateX(-50%);
  }
}
.timeSure {
  box-sizing: border-box;
  padding-left: $padd;
  padding-right: $padd;
  width: 100%;
  //   height: 40px;
  margin-top: 8px;
  /deep/ .van-button--large {
    background-color: $main-color;
    border: none;
    height: 40px;
  }
}
</style>
